<div class="panel border-primary no-border border-3-top" data-panel-control style="margin-top: -20px;">
    <div class="panel-heading">
        <div class="panel-title">
            <h5>&nbsp;&nbsp;&nbsp;待办事项</h5>
        </div>
    </div>
    <div class="panel-body">
        <ql-menu [model]="index" (modelChange)="handle($event)" class="ql-menu-demo" mode="horizontal">
            <ql-menu-item index="1">提醒<span class="badge badge-pill badge-danger marglt">{{tasks.length}}</span></ql-menu-item>
            <ql-menu-item index="2">警示<span class="badge badge-pill badge-danger marglt">{{tasks2.length}}</span></ql-menu-item>
            <ql-menu-item index="3">通知<span class="badge badge-pill badge-danger marglt">{{tasks1.length}}</span></ql-menu-item>
            <ql-menu-item index="4">待办<span class="badge badge-pill badge-danger marglt">{{tasks3.length}}</span></ql-menu-item>
        </ql-menu>
        <div *ngIf="tabIndex=='1'">
            <table class="table table-striped table-bordered table-hover">
                <thead class="qltext">
                    <tr>
                        <th scope="col">提醒日期</th>
                        <th scope="col">事情类型</th>
                        <th scope="col">事件描述</th>
                        <th scope="col">客户姓名</th>
                        <th scope="col">事件时间</th>
                        <th scope="col">处理状态</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of tasks; let i = index" class="ql-text-center fontsizethree">
                        <td>{{data.time}}</td>
                        <td>{{data.type}}</td>
                        <td>{{data.content}}</td>
                        <td><a href="">{{data.customerName}}</a></td>
                        <td>{{data.date}}</td>
                        <td>{{data.process}}</td>
                        <td>
                            <em class="fa fa-arrow-right hand cursorcss" title="处理"></em>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10">
                            <button type="button" class="btn btn-primary btn-sm buttoncss">更多</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div *ngIf="tabIndex=='2'">
            <table class="table table-striped table-bordered table-hover">
                <thead class="qltext">
                    <tr>
                        <th scope="col">提醒日期</th>
                        <th scope="col">事情类型</th>
                        <th scope="col">事件描述</th>
                        <th scope="col">客户姓名</th>
                        <th scope="col">事件时间</th>
                        <th scope="col">处理状态</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of tasks2; let i = index" style="text-align: center;font-size: 0.3em;">
                        <td>{{data.time}}</td>
                        <td>{{data.type}}</td>
                        <td>{{data.content}}</td>
                        <td><a href="">{{data.customerName}}</a></td>
                        <td>{{data.date}}</td>
                        <td>{{data.process}}</td>
                        <td>
                            <em class="fa fa-arrow-right hand cursorcss" title="处理"></em>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10">
                            <button type="button" class="btn btn-primary btn-sm buttoncss">更多</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div *ngIf="tabIndex=='3'">
            <table class="table table-striped table-bordered table-hover">
                <thead class="qltext">
                    <tr>
                        <th scope="col">提醒日期</th>
                        <th scope="col">事情类型</th>
                        <th scope="col">事件描述</th>
                        <th scope="col">客户姓名</th>
                        <th scope="col">事件时间</th>
                        <th scope="col">处理状态</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of tasks1; let i = index" class="ql-text-center fontsizethree">
                        <td>{{data.time}}</td>
                        <td>{{data.type}}</td>
                        <td>{{data.content}}</td>
                        <td><a href="">{{data.customerName}}</a></td>
                        <td>{{data.date}}</td>
                        <td>{{data.process}}</td>
                        <td>
                            <em class="fa fa-arrow-right hand cursorcss" title="处理"></em>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10">
                            <button type="button" class="btn btn-primary btn-sm buttoncss">更多</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div *ngIf="tabIndex=='4'">
            <table class="table table-striped table-bordered table-hover">
                <thead class="qltext">
                    <tr>
                        <th scope="col">提醒日期</th>
                        <th scope="col">事情类型</th>
                        <th scope="col">事件描述</th>
                        <th scope="col">客户姓名</th>
                        <th scope="col">事件时间</th>
                        <th scope="col">处理状态</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of tasks3; let i = index" class="ql-text-center fontsizethree">
                        <td>{{data.time}}</td>
                        <td>{{data.type}}</td>
                        <td>{{data.content}}</td>
                        <td><a href="">{{data.customerName}}</a></td>
                        <td>{{data.date}}</td>
                        <td>{{data.process}}</td>
                        <td>
                            <em class="fa fa-arrow-right hand cursorcss" title="处理"></em>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10">
                            <button type="button" class="btn btn-primary btn-sm buttoncss">更多</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
